import React from "react";
import ReactDOM from "react-dom/client";

// 引入 classnames 模块，做动态 className 用
import classNames from "classnames";

// 引入 index.css
import "./index.css";

/**
 * 列表渲染
 *      arr.map() 方法来渲染
 *
 *      key的作用
 *        跟 vue 中一样，给元素添加一个标识，让 React 在做虚拟DOM diff（比对）时，能更高效。
 */

class Hello extends React.Component {
  state = {
    curTab: "Tab 1",
    buttons: ["Tab 1", "Tab 2", "Tab 3"],
    list: [
      { id: "001", name: "Apple" },
      { id: "002", name: "Banana" },
      { id: "003", name: "Orange" },
    ],
  };

  render() {
    const { curTab, buttons } = this.state;

    return (
      <div>
        <h1>Hello</h1>

        <ul>
          {this.state.list.map((item) => {
            return <li key={item.id}>{item.name}</li>;
          })}
        </ul>

        <div>
          {buttons.map((item, index) => {
            return (
              <button
                key={index}
                className={classNames(["tab", { active: curTab === item }])}
                onClick={() => {
                  this.setState({
                    curTab: item,
                  });
                }}
              >
                {item}
              </button>
            );
          })}
        </div>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<Hello />);
